<template>
  <Card>
    <!-- <div class="flexCSB">
      <div>
        <span>录入时间:</span>
        <DatePicker :clearable="clearable" format="yyyy-MM-dd HH:mm:ss" type="daterange" placeholder="请选择起止时间"
          style="width: 300px" :value="time" @on-change="onChange"></DatePicker>
      </div>
    </div> -->
    <div class="block" style="margin-bottom: 20px;">
    <span class="demonstration">录入时间:</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      value-format="yyyy-MM-dd HH:mm:ss"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="fdataChange(value1)"
      >
    </el-date-picker>
  </div>
    <div class="flexCSB" style="margin-top: 10px">     
      <div>
        <span>姓名: </span><el-input style="width:200px;margin-right: 20px;" v-model="sname" placeholder="请输入姓名"></el-input>
        <span>手机号: </span><el-input style="width:200px;margin-right: 20px;" v-model="sphone" placeholder="请输入手机号"></el-input>
        <span>身份证号: </span> <el-input style="width:200px" v-model="sidNum" placeholder="请输入身份证号"></el-input>
         <el-button type="primary" @click="search">查询</el-button>
         <el-button type="warning" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="flexCSB" style="margin-top: 10px">
      <div>
        <el-dialog :title="modalTitle" :visible.sync="modal1" append-to-body="false">
          <!-- 就多了一个这个玩意   这个组件没有层级现在是2000 -->
          <el-form :model="subjectName" :rules="rules" ref="ruleForm">
            <el-form-item label="人员姓名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="subjectName.name" autocomplete="off" :disabled="disable"></el-input>
            </el-form-item>
            <el-form-item label="证件号码" :label-width="formLabelWidth" prop="cardNum">
              <el-input v-model="subjectName.cardNum" autocomplete="off" :disabled="disable"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone">
              <el-input v-model="subjectName.phone" autocomplete="off" :disabled="disable"></el-input>
            </el-form-item>
             <!-- <el-form-item label="采集时间" :label-width="formLabelWidth" prop="time">
              <el-input v-model="subjectName.time" autocomplete="off"></el-input>
            </el-form-item> -->
            <el-form-item label="人脸照片:" :label-width="formLabelWidth">
              <img :src="subjectName.faceUrl" alt="" width="700px">
              <!-- <vue-uploadimg :key="ind" :imgUrl="imgurl1" url="chongqing/stage/file/uploadFile" :clear="clear" @uploadImg="uploadImg1"></vue-uploadimg> -->
            </el-form-item>
         
          </el-form>
        
        </el-dialog>
      </div>
    </div>
    <Table class="table" :loading="loading1" style="width: 100%  !important;" highlight-row :columns="columns"
      :data="tableData" @on-select="getSelect" @on-select-all="getSelectAll" @on-selection-change="getSelectChange">
    </Table>
    <Page show-total class="page" :total="total" :current.sync="pageNum" :page-size="pageSize" show-elevator
      @on-change="changePage" />
    <Modal title="详细信息" v-model="modal66" width="50">
      <Spin fix size="large" v-if="loading3"></Spin>
      <Table class="table" highlight-row :columns="column1" :data="data2" style="width: 100% !important;"></Table>
      <!--我点击查看的时候这个modal弹出来  -->
      <div slot="footer">
        <Button type="warning" class="Button" @click="modal66 = false">关闭</Button>
      </div>

    </Modal>
  </Card>


</template>

<script>
  import {
    exportMethod
  } from "../../../util/push";
  export default {
    data() {
      return {
        value1:[],
       sname:'',
       sphone:'',
       sidNum:'',
        disable:true,
        rules: {
          name: [{
              required: true,
              message: '请输入用户姓名',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 15,
              message: '长度在 2 到 10 个字符',
              trigger: 'blur'
            }
          ],
          cardNum: [{
              required: true,
              message: '请输入用户身份证号',
              trigger: 'blur'
            },
            {
              min: 18,
              max: 25,
              message: '长度在 18 到 25 个字符',
              trigger: 'blur'
            }
          ],
          phone: [{
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            },
            {
              min: 11,
              max: 11,
              message: '长度在 11个字符',
              trigger: 'blur'
            }
          ]
        },
        form: {},
        modalTitle: "新增人员",
        modal66: false,
        subjectName: {
          name: '',
          cardNum: "",
          phone: "",
          faceUrl: "",
          gender: "",
          identityType: ""
          // mustAnswer: true,
          // options: null,
          // serialNumber: 0,
          // subjectType: null,
          //  input1: '',
          // input2: '',
          // input3: ''
        },
        checkLists: [],
        checkList: [],
        formLeft: {

        },
        columns: [{
            type: "selection",
            width: 60,
            align: "center",
          },
          {
            title: "编号",
             type: "index",
            key: "orderNum",
            align: "center",          
          },
          {
            title: "姓名",
            key: "name",
            align: "center",
            width: 120,
          },
          {
            title: '人脸图片',
            key: 'faceUrl',
            align: 'center',           
            render: (h, params) => {
              return h('img', {
              style:{
                width:"100px"
              },
                attrs: {
                  src: (params.row.faceUrl==="1") ? '' : params.row.faceUrl
                }
              })
            }
          },
          // {
          //   title: "人员类型",
          //   align: "center",
          //   render: (h, params) => {
          //     let color = "";
          //     let content = "";
          //     if (params.row.status === 1) {
          //       color = "yellow";
          //       content = "工作人员";
          //     }
             
          //     if (params.row.status === 3) {
          //       color = "green";
          //       content = "临时人员";
          //     }
          //     // if (params.row.status === 4) {
          //     //   color = "blue";
          //     //   content = "已退款";
          //     // }
          //     // if (params.row.status === 5) {
          //     //   color = "red";
          //     //   content = "退款中";
          //     // }
          //     // if (params.row.status === 6) {
          //     //   color = "red";
          //     //   content = "交易关闭";
          //     // }
          //     return h(
          //       "Tag", {
          //         props: {
          //           color: color
          //         },
          //       },
          //       content
          //     );
          //   },
          // },
          {
            title: '操作',
            align: 'center',
            width:'200px',
            fixed: 'right',
            render: (h, params) => {
              return h('div', [
                h(
                  'Button', {
                    props: {
                      type: 'primary'
                    },
                    style: {
                      'margin-left': '10px'
                    },
                    on: {
                      click: () => {
                        this.getUpdate(params)
                      }
                    }
                  },
                  '查看'
                ),
             
                // h(
                //   'Button', {
                //     props: {
                //       type: 'error'
                //     },
                //     style: {
                //       'margin-left': '10px'
                //     },
                //     on: {
                //       click: () => {
                //         this.del(params)
                //       }
                //     }
                //   },
                //   '删除'
                // )
              ])
            }
          }
        ],
        column1: [{
            type: "selection",
            width: 60,
            align: "center",
          },
          {
            title: "编号",
            key: "orderNum",
            align: "center",
            width: 200
          },

          {
            title: "姓名",
            key: "name",
            align: "center",
            width: 120,
          },
          {
            title: "身份证号",
            key: "cardNum",
            align: "center",
            width: 220,
          },
          {
            title: "手机号",
            key: "phone",
            align: "center",
            width: 130,
          }
        ],
        status: "0",
        statusList: [{
            id: '0',
            name: "全部",
          },
          {
            id: '1',
            name: "待支付",
          },
          {
            id: '2',
            name: "待使用",
          },
          {
            id: '3',
            name: "已使用",
          },
          {
            id: '4',
            name: "已退款",
          },

          {
            id: "5",
            name: "退款中",
          },
          {
            id: "6",
            name: "交易关闭",
          },
        ],
        tableData: [],
        pageNum: 1,
        pageSize: 10,
        total: 0,
        loading1: false,
        sdata: "",
        imgurl1: "",
        // loading2: false,
        orderName: "",
        orderNames: "",
        orderTel: "",
        ids: [],
        modal1: false,
        order: {
          reason: "", // 展览名称
        },
        // rules: {
        //   reason: [{
        //     required: true,
        //     message: "退款原因不能为空",
        //     trigger: "blur"
        //   }, ],
        //   input2: [{
        //     required: true,
        //     message: "退款原因不能为空",
        //     trigger: "blur"
        //   }, ],
        //   checkLists: [{
        //     required: true,
        //     message: "退款原因不能为空",
        //     trigger: "blur"
        //   }, ]
        // },
        modelTitle: "退款操作",
        ids: [],
        data2: [],
        time: [],
        time2: [],
        sDime:'',
        eDime:''
      };
    },
    created() {
      let time = this.getTime(new Date());
      let time1 = this.getTime(new Date(new Date().getTime() - 86400000 * 5));
      this.time = [time1, time];
      var date = new Date();
      this.time2 = this.getTime(date).split("-");
      this.time2.push(this.getTime(this.getTime4(7)));
      this.time2.push(this.getTime(this.getTime4(1)));
      this.getData();
    },
    mounted() {
    },
    methods: {
      search(){
        console.log(this.sname);
        console.log(this.sphone);
        console.log(this.sidNum);
      //     this.$http(
      //   "/chongqing/stage/face/findFaceTourist",
      //   {
      //     startDate:'',
      //     endDate:'',
      //     cardNum: this.sidNum,
      //     // current: '',
      //     name: this.sname,
      //     phone: this.sphone,
      //     // size: 10,
      //     // page: 1
      //   },
      //   "post",
      //   (res) => {
      //     console.log(res, '我是时间条件筛选');   
      //     this.tableData = res.data.data.records
      //     this.total=res.data.data.total  
      //   }
      // )
        this.getData()


      },
      reset(){
          this.sname=''
          this.sphone=''
          this.sidNum=''
          this.getData()
      },
      // uploadImg1(data) {
      //   console.log(data, "我是上传图片")
      //   // this.newData2.pic = data
      //   this.imgurl1 = data
      //   console.log(this.imgurl1)
      // },
      clearable(e) {},
      //修改(现查看)人脸库列表详细信息
      getUpdate({ row }) {
        this.modal1 = true;
        this.modalTitle = "查看详情"
        this.subjectName = row
        // this.imgurl1 = row.faceUrl
        console.log(this.subjectName, "查看详情");      
        this.eTime = row.endTime;
        this.sTime = row.startTime
        console.log(this.eTime);
        this.subjectName = {
          endDate:row.endTime,
          startDate:row.startTime,
          name: row.name,
          cardNum: row.cardNum,
          phone: row.phone,
          faceUrl: row.faceUrl,
          gender: row.gender,
          id:Number(row.id),
          identityType: row.identityType,
        }
        this.value3.push(this.tableData[row._index].deviceIds)
        // this.imgurl1 = row.faceUrl
      },
      //查看详细信息
      // look(params) {
      //   console.log(param);
      //   this.loading3 = false;
      //   this.modal66 = true;
      //   this.data2 = []
      //   this.data2.push(params.row)
      //   console.log(this.data2)
      //   // this.$http(
      //   //   '/chongqing/stage/face/saveOrUpdateFaceTraveler', {
      //   //     "cardNum": params.row.cardNum,
      //   //     "faceUrl": params.row.faceUrl,
      //   //     "id": params.row.id,
      //   //     "identityType": params.row.identityType,
      //   //     "name": params.row.name,
      //   //     "phone": params.row.phone,
      //   //     "sex": params.row.sex
      //   //   },
      //   //   'POST',
      //   //   (res) => {
      //   //     // 是修改接口，但是可以用来回显？  数据呢   
      //   //     console.log(res,"888888888888888");
      //   //     //把这个赋值赋值为数组对象吗
      //   //     // this.data2
      //   //   })
      // },
      //删除列表中得某一项
      del(params) {
        this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.$http(
              '/chongqing/stage/face/deleteStaffById', {
                id: params.row.id
              },
              'get',
              (res) => {
                console.log(res)
                if (res.data.data == true) {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                
                  this.pageNum = 1
                  this.getData()
                } else {
                  this.$message({
                    type: 'error',
                    message:'删除成功!'
                  })
                }
              }
            )
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })

      },
      setMealSelects() {
        this.checkLists = this.checkLists.slice(-1)
      },
      setMealSelect() {
        console.log(this.checkList)
        // 截取数组的最后一位,并从新赋值
        this.checkList = this.checkList.slice(-1)
      },
      fdataChange(value1) {
        if(value1 == null){
        this.sDime = ''
        this.eDime = ''
       }else{
        this.sDime = this.value1[0]
        this.eDime = this.value1[1]
       }       
      this.getData();
      },
      
     
      change2() {
        this.current = 1;
        this.getData();
        console.log(this.getData());

      },
      statusChange() {
        this.pageNum = 1;
        this.getData();
      },
     
      //导出付费展览订单
      exddan() {
        let start = "",
          end = "";
        if (this.time[0] != "" && this.time[1] != "") {
          start = this.time[0];
          end = this.time[1];
        }
        // let _this = this
        exportMethod({
          url: "/ztmuseum/stage/exhibition-order/exportExhibitionOrder",
          method: "post",
          data: {
            "orders": [{
              "asc": true,
              "column": ""
            }],
            beginDate: start == undefined ? "" : start,
            endDate: end == undefined ? "" : end,
            exhibitionName: "",
            name: "",
            orderNum: "",
            phone: "",
            status: Number(this.status),
            current: this.pageNum,
            size: this.pageSize,
          }
        })
      },

      // handleReset(form) {
      //   this.modal = false;
      //   this.$refs[form].resetFields();
      // },
      // 分页，改变页码
      changePage(data) {
        console.log(data);
        this.pageNum = data;

        this.getData();
        
      },

      // 获取数据
      getData() {
        // let start = "",
        //     end = "";
        // if (this.value1[0] != "" && this.value1[1] != "") {
        //   start = this.value1[0];
        //   end = this.value1[1];
        // }
        this.loading1 = true;
        this.$http(
          "/chongqing/stage/face/findFaceTourist", {
            cardNum: this.sidNum,
          // current: '',
            name: this.sname,
            phone: this.sphone,
            // startDate: start == undefined ? "" : start,
            // endDate: end == undefined ? "" : end,
            startDate:this.sDime,
            endDate:this.eDime,
            current: this.pageNum,
            orderNum: this.orderName, 
            size: this.pageSize,
            // phone: this.orderTel,
            // name: this.orderNames,
            status: this.status, // 状态 1-待支付 2-待使用 3-已使用 4-已退款
          },
          "post",
          (res) => {
            console.log(res);
            if (res.data.code == 1000) {
              this.tableData = res.data.data.records;
              console.log(this.tableData)
              this.total = res.data.data.total;
            } else {
              this.$Message.error(res.data.msg);
            }
            this.loading1 = false;
          }
        );
      },


      // 选中某一项触发,分别为已选项和刚选择的项。
      getSelect(selection, row) {
        // console.log(selection, row);
      },
      // 点击全选时触发，返回值为已选项
      getSelectAll(selection) {
        // console.log(selection);
      },
      // 只要选中项发生变化时就会触发，返回值为 selection，已选项
      getSelectChange(selection) {
        // console.log(selection);
        this.sdata = selection,
          this.ids = selection.map((item) => item.id);
        console.log(selection);
      },
    },
  };

</script>

<style scoped>
  .divflex {
    display: flex;
  }

  .table {
    width: 100% !important;
  }

</style>
